<template>
    <div>
        <h3>{{viewData.viewTitle}}</h3>
        <div ref="pieEcharts" class="fl echarts" :style="{width:'100%',height:viewData.viewHeight}"></div>
    </div>
</template>
<script>
import {queryApi, fileUpload, fileUploadvideo} from '@/api/api'
export default {
    props:{
        viewData:{
            viewTitle:'', 
            viewHeight:0,
            seiveApi:'',
            serachParam:{},
            options:{
                title:{
                    text: '',
                    subtext: '',
                    left: 'center'//left/right/center
                },
                legend:{
                    show:false,//是否显示图例
                    orient:'horizontal',//布局方式，默认水平 'horizontal' ¦ 'vertical'垂直
                    type:'scroll',//图例样式 plain\scroll 普通/可滚动翻页，当图例数量较多时使用
                    left:'center',// left right center 图例显示位置
                    icon:'circle',//图例样式 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' 或图片'image://http://xxx.xxx.xxx/a/b.png'
                    itemWidth:20,//icon宽度
                    itemHeight:20,//icon高度
                    textStyle: {
                        color: '#333'//图例文字颜色
                    },
                },
                series:{
                    name:"",
                    radius:"",
                    data:[]
                }
                
            }
        }   
    },
    data() {
        return {

        };
    },
    methods: {
        init(){
            console.log(this.viewData)
            var echartsNew = this.$echarts.init(this.$refs.pieEcharts);
            var seriesData = []
            if(this.viewData.seiveApi!=''){
                queryApi(this.viewData.serachParam).then(res => {
                    var json = res.data;
                    if(json.code == '000000'){
                        seriesData = json.series;
                    }
                })
            }else{
                seriesData = this.viewData.options.series.data;
            }
            var options = {
                title: {
                    text: this.viewData.options.title.text,
                    subtext: this.viewData.options.title.subtext,
                    left: this.viewData.options.title.left
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    show:true,//是否显示图例
                    orient:'vertical',//布局方式，默认水平 'horizontal' ¦ 'vertical'垂直
                    type:'scroll',//图例样式 plain\scroll 普通/可滚动翻页，当图例数量较多时使用
                    left:'left',// left right center 图例显示位置
                    icon:'circle',//图例样式 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' 或图片'image://http://xxx.xxx.xxx/a/b.png'
                    itemWidth:20,//icon宽度
                    itemHeight:20,//icon高度
                    textStyle: {
                        color: '#333'//图例文字颜色
                    },
                },
                series: [
                    {
                        name: this.viewData.options.series.name,
                        type: 'pie',
                        radius: this.viewData.options.series.radius,
                        data:seriesData ,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            echartsNew.setOption(options,true);
        }
    },
    mounted(){
        
        this.init();
    },
}
</script>